<template>
  <div class="flex flex-col h-screen main-layout">
    <div class="flex flex-1 overflow-hidden content-wrapper">
      <a-menu
        id="dddddd"
        class="w-64 vertical-menu"
        v-model:openKeys="openKeys"
        v-model:selectedKeys="selectedKeys"
        mode="inline"
        @click="handleClick"
      >
        <a-sub-menu key="sub1" @titleClick="titleClick">
          <template #icon>
            <MailOutlined />
          </template>
          <template #title>外来入侵物种相关链接</template>
          <a-menu-item-group key="g1">
            <template #icon>
              <QqOutlined />
            </template>
            <template #title>资源中心</template>
            <a-menu-item key="1" @click="showGovernmentDepartments">政府部门</a-menu-item>
            <a-menu-item key="2" @click="showResearchPapers">研究论文</a-menu-item>
          </a-menu-item-group>
        </a-sub-menu>
      </a-menu>
      <div class="flex-1 p-5 overflow-y-auto main-content">
        <a-breadcrumb class="flex items-center">
          <HomeOutlined />
          <span>当前位置:&nbsp;&nbsp;</span>
          <a-breadcrumb-item><a href="/">首页</a></a-breadcrumb-item>
          <a-breadcrumb-item><router-link to="/links">相关链接</router-link></a-breadcrumb-item>
        </a-breadcrumb>
        <component :is="currentComponent" />
      </div>
    </div>
    <FooterComponent />
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref, watch} from 'vue';
import { HomeOutlined, MailOutlined, QqOutlined } from '@ant-design/icons-vue';
import FooterComponent from './Footer.vue';
import ResearchPapers from './links/ResearchPapers.vue';
import GovernmentDepartments from './links/GovernmentDepartments.vue';

// 状态管理
const selectedKeys = ref<string[]>(['1']);
const openKeys = ref<string[]>(['sub1']);
const currentComponent = ref<null | typeof ResearchPapers | typeof GovernmentDepartments>(GovernmentDepartments); // 默认组件

// 处理菜单点击
const handleClick = (e: Event) => {
  console.log('click', e);
};

// 处理子菜单标题点击
const titleClick = (e: Event) => {
  console.log('titleClick', e);
};

// 显示研究论文组件
const showResearchPapers = () => {
  currentComponent.value = ResearchPapers;
};

// 显示政府部门组件
const showGovernmentDepartments = () => {
  currentComponent.value = GovernmentDepartments;
};

// 监听打开的菜单项
watch(openKeys, (val) => {
  console.log('openKeys', val);
});

onMounted(() => {
  document.title = '农业外来入侵物种防控与管理平台';
});
</script>

<style scoped>
.vertical-menu {
  height: 100%;
}
</style>
